<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app" class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">注册</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-6">
                            <input type="email" v-model="username" class="form-control" id="inputEmail3" 
                                placeholder="姓名">
                        </div>
                        <div v-show="!usernameLength()" class="col-sm-4 form-control-static text-danger" >
                            用户名必须是8-12位字符
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" v-model="pwd" class="form-control" id="inputPassword3" 
                                placeholder="密码">
                        </div>
                        <div v-show="!pwdLength()" class="col-sm-4 form-control-static text-danger" >
                            密码必须是8-12位字符
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" v-model="sex" name="inlineRadioOptions" id="inlineRadio1" 
                                    value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" v-model="sex" name="inlineRadioOptions" id="inlineRadio2" 
                                    value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10" :class="isAgree?'text-success':'text-danger'">
                            <!--类名： text-success： 绿色  ； text-danger：红色 -->
                            <div class="checkbox " class="text-success">
                                <label>
                                    <input v-model="isAgree" type="checkbox"  value="男"> 是否同意条款
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">城市</label>
                        <div class="col-sm-6">
                            <select v-model="city"  class="form-control"  >
                                <option value="">--请选择城市--</option>
                                <option value="深圳">深圳</option>
                                <option value="广东">广东</option>
                                <option value="上海">上海</option>
                            </select>

                        </div>
                        <div v-show="!city" class="col-sm-4 text-danger form-control-static" >
                            请选择城市
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <!-- 不能点击 加类名 disabled -->
                            <button type="submit" :class="canRegister()?'':'disabled'" class="btn btn-success" 
                                >注册</button>
                            <button type="submit" :class="canReset()?'':'disabled'" class="btn btn-danger" 
                                >重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
// 复习 ：逻辑搞清楚 
// 注册作业 
    new Vue({
        el:"#app",
        data:{
            username:"",
            pwd:"",
            sex:"男",
            isAgree:false,
            city:''
        },
        methods:{
            usernameLength(){
                if(this.username.length>=8 && this.username.length<=12){
                    return true;
                }else{
                    return false;
                }
            },
            pwdLength(){
                if(this.pwd.length>=8 && this.pwd.length<=12){
                    return true;
                }else{
                    return false;
                }
            },
            canRegister(){
                if(this.usernameLength() && this.pwdLength() && this.isAgree && this.city!=''){
                    return true;
                }else{
                    return false;
                }
            },
            canReset(){
                if(this.username.length>0 || this.pwd.length>0 || this.isAgree || this.city!='' || this.sex=='女'){
                    return true;
                }else{
                    return false;
                }
            }
        }
    })


</script>

</html>

